<template>
    <div class="flexWrapBetween resource-item">
        <div class="r-title">{{info.title || info.content}}</div>
        <div class="r-buttons">
            <!--10-文字 11-链接 20-文档 21-图片 22-视频 23-DOC-->
            <template v-if="info.type == 10">
                <el-button class="mini-el" type="text" size="mini" @click="toCopy">拷贝</el-button>
                <el-button v-if="info.editable" class="mini-el" type="text" size="mini" @click="toDel">删除</el-button>
            </template>
            <template v-else-if="info.type == 11">
                <el-button class="mini-el" type="text" size="mini" >
                    <a :href="info.content" target="_blank">打开</a>
                </el-button>
                <el-button class="mini-el" type="text" size="mini" @click="toCopy">拷贝</el-button>
                <el-button v-if="info.editable" class="mini-el" type="text" size="mini" @click="toDel">删除</el-button>
            </template>
            <template v-else-if="info.type == 20 || info.type == 22">
                <el-button class="mini-el" type="text" size="mini" >
                    <a :href="info.content" target="_blank">下载</a>
                </el-button>
                <el-button v-if="info.editable" class="mini-el" type="text" size="mini" @click="toDel">删除</el-button>
            </template>
            <template v-else-if="info.type == 21">
                <el-button class="mini-el" type="text" size="mini" >
                    <a :href="info.content" target="_blank">打开</a>
                </el-button>
                <el-button v-if="info.editable" class="mini-el" type="text" size="mini" @click="toDel">删除</el-button>
            </template>
            <template v-else-if="info.type == 23">
                <el-button class="mini-el" type="text" size="mini" >
                    <a :href="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(info.content)" target="_blank">打开</a>
                </el-button>
                <el-button class="mini-el" type="text" size="mini" >
                    <a :href="info.content" target="_blank">下载</a>
                </el-button>
                <el-button v-if="info.editable" class="mini-el" type="text" size="mini" @click="toDel">删除</el-button>
            </template>
            <template v-else-if="info.type == 24">
                <el-button class="mini-el" type="text" size="mini" >
                    <a :href="info.content" target="_blank">打开</a>
                </el-button>
                <el-button v-if="info.editable" class="mini-el" type="text" size="mini" @click="toDel">删除</el-button>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    name: "resource-item",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {

        };
    },
    components: {

    },
    created() {

    },
    methods: {
        toCopy(e) {
            this.$copyText(this.info.content).then(() => {
                this.$message.success({duration:1000, message:"复制成功"})
            }).catch(err => {
                this.$message.error({duration:1000, message:"复制失败"})
            })
        },
        toDel(e) {
            this.$emit("delete");
        },
    },
};
</script>
<style scoped lang="scss">
.resource-item {
    width: 100%; margin: 5px 0 0 0;
    background-color: #f8f8f8; border-radius: 4px;

    .r-title {
        padding: 10px; width:calc(100% - 130px); line-height: 18px; border-bottom: 1px solid white;
        font-size: 14px; color: #666666; text-align: left; font-weight: normal;
    }
    .r-buttons {
        margin:5px 10px 0 0; width: 100px; text-align: right;
    }
}

</style>
